<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分支图</title>
    <style>
        #branch-graph {
            float: left;
            width: 50px;
            height: 1000px
        }

        #info {
            float: left;
            width: 200px;
            height: 1000px
        }

        .info-item {
            height: 100px;
        }

        #info-detail {
            float: left;
            width: 700px;
            height: 1000px
        }

    </style>
</head>
<body>
<div id="branch-graph-info">
    <div id="branch-graph">
        <svg height="1000px" width="50px">
            <circle cx="25" cy="25" r="7" style="fill:dodgerblue"></circle>
            <line x1="25" x2="25" y1="25" y2="125" stroke="dodgerblue" stroke-width="2"></line>

            <circle cx="25" cy="125" r="7" style="fill:dodgerblue"></circle>
            <line x1="25" x2="25" y1="125" y2="225" stroke="dodgerblue" stroke-width="2"></line>

            <circle cx="25" cy="225" r="7" style="fill:dodgerblue"></circle>
            <line x1="25" x2="25" y1="225" y2="325" stroke="dodgerblue" stroke-width="2"></line>

        </svg>
    </div>
    <div id="info">
        <div style="height: 25px"></div>
        <div class="info-item">
            编号：xxx <br>
            提交人：xxx<br>
            <a href="javascript:show_detail()">查看详情</a>
        </div>
        <div class="info-item">
            编号：xxx<br>
            提交人：xxx<br>
            <a href="javascript:show_detail()">查看详情</a>
        </div>
        <div class="info-item">
            编号：xxx<br>
            提交人：xxx<br>
            <a href="javascript:show_detail()">查看详情</a>
        </div>
    </div>
    <div id="info-detail">

    </div>

    <script>
        function show_detail() {
            let d = document.getElementById("info-detail")
            d.innerHTML = "abcd"
        }
    </script>
</div>
</body>
</html>